<div>
    <md-card>
        <md-card-content>
            <div flex layout="row" layout-align="center center" ng-hide="baseData.themePrimary">
                <md-progress-circular md-mode="indeterminate" class="md-accent"></md-progress-circular>
            </div>
            <md-divider ng-show="baseData.themePrimary"></md-divider>
            <md-list layout="row" ng-show="baseData.themePrimary">
                <div flex-xs="5" flex-sm="10" flex-gt-sm="10"></div>
                <div flex>
                    <form name="baseForm">
                        <md-list-item>
                            <md-input-container class="md-block" style="margin-bottom: -15px; width: 100%;">
                                <label translate>网站标题</label>
                                <input type="text" required name="title" ng-model="baseData.title">
                            </md-input-container>
                        </md-list-item>
                        <md-divider></md-divider>
                        <md-list-item>
                            <md-input-container class="md-block" style="margin-bottom: -15px; width: 100%;">
                                <label translate>网站短标题</label>
                                <input type="text" required name="title" ng-model="baseData.shortTitle">
                            </md-input-container>
                        </md-list-item>
                        <md-divider></md-divider>
                        <md-list-item>
                            <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                                <div flex="75" translate>使用Service Worker缓存静态页面</div>
                                <div flex layout="row" layout-align="end center"><md-switch ng-model="baseData.serviceWorker" ng-change="serviceWorkerUpdate()" aria-label="serviceWorker"></md-switch></div>
                            </div>
                        </md-list-item>
                        <md-divider></md-divider>
                        <md-list-item ng-show="showBrowserPush">
                            <div class="md-list-item-text" style="width: 100%;" layout="row" layout-align="space-between center">
                                <div flex="75" translate>接收消息推送</div>
                                <div flex layout="row" layout-align="end center"><md-switch ng-model="receiveBrowserPush" ng-change="changeBrowserPush()" aria-label="browserPush"></md-switch></div>
                            </div>
                        </md-list-item>
                        <md-divider ng-show="showBrowserPush"></md-divider>
                        <div style="margin: 15px;">
                            <div style="margin-top: 10px; margin-bottom: 10px;" translate>主题颜色</div>
                            <md-grid-list
                                md-cols-xs="4" md-cols-sm="6" md-cols-md="12" md-cols-gt-md="24"
                                md-row-height="1:1"
                                md-gutter="12px">
                                <md-grid-tile
                                    style="cursor: pointer;"
                                    ng-repeat="c in colors"
                                    ng-style="c.primaryStyle"
                                    ng-click="setPrimaryColor(c.value)">
                                </md-grid-tile>
                            </md-grid-list>
                        </div>
                        <md-divider></md-divider>
                        <div style="margin: 15px;">
                            <div style="margin-top: 10px; margin-bottom: 10px;" translate>主题第二颜色</div>
                            <md-grid-list
                            md-cols-xs="4" md-cols-sm="6" md-cols-md="12" md-cols-gt-md="24"
                                md-row-height="1:1"
                                md-gutter="6px">
                                <md-grid-tile
                                    style="cursor: pointer;"
                                    ng-repeat="c in colors"
                                    ng-style="c.accentStyle"
                                    ng-click="setAccentColor(c.value)">
                                </md-grid-tile>
                            </md-grid-list>
                        </div>
                    </form>
                </div>
                <div flex-xs="5" flex-sm="10" flex-gt-sm="10"></div>
            </md-list>
            <md-divider ng-show="baseData.themePrimary"></md-divider>
        </md-card-content>
    </md-card>
</div>
